<template>
	<view>
		<view class="m-head">
			<view class="m-head-left">
				<view class="m-head-star">
					<text>{{hotel.pingjia_star}}</text>
				</view>
			</view>
			<view class="m-head-line"></view>
			<view class="m-head-right">
				<view class="m-head-item">
					<text>位置：</text>
					<u-rate :count="5" :size="24" :gutter="2" :minCount="1" :disabled="true" v-model="hotel.weizhi_star"></u-rate>
				</view>
				<view class="m-head-item">
					<text>环境：</text>
					<u-rate :count="5" :size="24" :gutter="2" :minCount="1" :disabled="true" v-model="hotel.huanjing_star"></u-rate>
				</view>
				<view class="m-head-item">
					<text>卫生：</text>
					<u-rate :count="5" :size="24" :gutter="2" :minCount="1" :disabled="true" v-model="hotel.weisheng_star"></u-rate>
				</view>
				<view class="m-head-item">
					<text>设施：</text>
					<u-rate :count="5" :size="24" :gutter="2" :minCount="1" :disabled="true" v-model="hotel.sheshi_star"></u-rate>
				</view>
			</view>
		</view>
		<view class="m-grap">
			
		</view>
		<view class="u-flex-col u-m-l-25 u-m-r-25 u-m-t-25">
			<view class="m-score-item u-p-b-25 u-m-b-25 u-border-bottom" v-for="(item,index) in list" :key="index">
				<view class="u-flex">
					<view class="m-score-item-img">
						<image v-if="item.user.image" :src="item.user.image" mode=""></image>
						<image v-else src="@/static/center/center-logo.png" mode=""></image>
					</view>
					<view class="u-flex-1">
						<view class="m-score-item-font1">{{item.user.nickname}}</view>
						<view class="m-score-font2">
							<text>{{item.dtTime}}</text>
						</view>
					</view>
					<view class="m-score-item-star">
						<text>{{item.pingjia_star}}</text>
					</view>
				</view>
				<view class="m-score-item-con">
					<view class="m-font1 u-m-t-20">
						<text>{{item.content}}</text>
					</view>
					<view class="u-flex u-flex-wrap">
						<view class="m-pingjia-img" v-for="(val,key) in item.image" @click="$m.previewImage(item.image,key)">
							<image :src="val" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			</view>
			<uni-load-more :status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {getHouseCommentListFun} from "@/common/function/api_fun.js"
	import {getScoreText,get_date} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				hotel:{},
				list:[],
				loading:'loading',
				params:{
					page:1,
					pagenum:10,
					hotal_id:'',
					type:0
				}
			};
		},
		computed:{
			getDateComputed(){
				return (time)=>{
					return get_date('YYYY-MM-DD',time*1000);
				}
			}
		},
		onReachBottom() {
			if(this.loading == 'loading' || this.loading == 'noMore') return false;
			this.getListFun()
		},
		onLoad(options) {
			this.hotel = uni.getStorageSync('hotelInfo')
			this.params['hotal_id'] = options.marchant_id
			this.getListFun()
		},
		methods:{
			getListFun(){
				let params = this.params
				this.loading = 'loading'
				this.$http.getJson('hotal_commentList',params).then(res=>{
					if(res.code == 1){
						let data = res.data || []
						let len = data.length
						if(len > 0){
							this.list= this.list.concat(data)
						}
						if(len == params.limit){
							this.params.page += 1
							this.loading = 'more'
						}else{
							this.loading = 'noMore'
						}
					}else{
						this.$m.msg(res.msg)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.m-head{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		.m-head-left{
			display: flex;
			justify-content: center;
			width: 230rpx;
			flex-shrink: 0;
			.m-head-star{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 120rpx;
				height: 82rpx;
				background: #D3A358;
				border-radius: 24rpx 24rpx 0rpx 24rpx;
				font-size: 60rpx;
				color: #fff;
				line-height: 82rpx;
			}
		}
		.m-head-line{
			width: 1px;
			height: 82rpx;
			background: #E6E2DE;
		}
		.m-head-right{
			display: flex;
			flex-wrap: wrap;
			.m-head-item{
				display: flex;
				align-items: center;
				margin-left: 35rpx;
				margin-bottom: 10rpx;
				font-size: 24rpx;
				color: #000;
			}
		}
	}
	.m-grap{
		width: 100%;
		height: 20rpx;
		background: #f6f6f6;
	}
	.m-font1 {
		font-size: 26rpx;
		color: #333;
		line-height: 36rpx;
	}
	
	.m-font2 {
		font-size: 26rpx;
		color: #999;
	}
	
	.m-font3 {
		font-size: 20rpx;
		color: #333;
	}
	
	.m-font4 {
		font-size: 30rpx;
		color: #333;
		font-weight: 800;
	}
	
	.m-font5 {
		font-size: 26rpx;
		color: #ff9900;
	}
	
	.m-font6 {
		font-size: 24rpx;
		color: #333;
	}
	
	.m-font7 {
		font-size: 24rpx;
		color: #999;
	}
	.m-title-right{
		width: 300rpx;
		text-align: right;
		font-size: 26rpx;
		color: #999;
	}
	.m-score-item {
	
		.m-score-item-img {
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	
		.m-score-item-star {
			font-size: 48rpx;
			color: #D3A358;
			font-weight: 500;
	
			&::after {
				content: '分';
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	
		.m-score-item-font1 {
			font-size: 26rpx;
			color: #222222;
			font-weight: 600;
			line-height: 38rpx;
			margin-bottom: 4rpx;
		}
		.m-score-item-font2 {
			font-size: 22rpx;
			color: #ADA9A5;
		}
	
		.m-score-item-con {
			.m-pingjia-img {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
	
				&:nth-child(4n) {
					margin-right: 0;
				}
	
				image {
					width: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>
